<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <div id="root">

        <!-- 自定义指令 v-big 所谓的自定义指令其实就是个函数去操作DOM元素 -->
        <h2>当前值：<span v-text="n"></span></h2>
        <h2>大10倍后的值：<span v-big="n"></span></h2>
        <button @click="n++">点我++</button>
        <br>
        <input type="text" v-fbind:value="n" />

    </div>


</body>
<script type="text/javascript">

    // 如果有2个Vue实例，需要公用一个自定义指令，需要写全局指令
    // Vue.directive('big', function (element, binding) {
    //     element.innerHTML = binding.value * 10
    // })

    const vm = new Vue({
        el: "#root",
        data: {
            n: 1,
        },
        // 自定义指令放到这里，这种都是局部自定义指令写法
        directives: {
            // element参数：表示使用了v-big指令的标签
            // binding参数：表示给v-big指令
            big(element, binding) {
                element.innerHTML = binding.value * 10
            },
            // 自定义函数调用阶段：
            // 1、指令于元素绑定时（一上来）
            // 2、指令所在模板被重新解析
            fbind: {
                // 自定义指令写出对象后，里面都可以写3个函数

                // 指令于元素绑定时（一上来）会调用
                bind(element, binding) {
                    console.log('bing...');
                    element.value = binding.value
                },
                // 指令所在元素被插入页面时调用
                inserted(element, binding) {
                    console.log('inserted...');
                    element.focus() // 鼠标焦点设定到标签
                },
                // 指令所在元素被重新解析时
                update(element, binding) {
                    console.log('update...');
                    element.value = binding.value
                },

                // 一般bind函数和update函数写的一样，所以只有特殊情况下需要编写inserted函数的内容时，使用对象式自定义指令
            }

        }
    })
</script>

</html>